<template>
  <Card dis-hover :bordered="false">
    <Row class="ivu-mb-8">
      <Col :span="4">
        <Select
          v-model="params.project_id"
          @on-change="askData()"
          clearable
          placeholder="请选择项目"
        >
          <Option
            v-for="item in projectLists"
            :key="item.value"
            :value="item.value"
            >{{ item.label }}</Option
          >
        </Select>
      </Col>
      <Col :span="20" style="text-align:right">
        <Button
          type="primary"
          @click="handleEdit(false)"
          v-hasC="{
            name: '-v1-net-setting-add-edit',
            flag: '/v1/net/setting/add-edit',
          }"
          >新增</Button
        >
      </Col>
    </Row>

    <Table :columns="columns" :data="data" :loading="loading">
      <template slot-scope="{ row }" slot="action">
        <a
          @click="handleProject(row)"
          v-hasC="{
            name: '-v1-net-setting-bind-project',
            flag: '/v1/net/setting/bind-project',
          }"
          >项目</a
        >
        <Divider
          type="vertical"
          v-hasCC="[
            {
              name: '-v1-net-setting-bind-project',
              flag: '/v1/net/setting/bind-project',
            },
            {
              name: '-v1-net-setting-bind-channel',
              flag: '/v1/net/setting/bind-channel',
            },
          ]"
        ></Divider>
        <a
          @click="handleChannel(row)"
          v-hasC="{
            name: '-v1-net-setting-bind-channel',
            flag: '/v1/net/setting/bind-channel',
          }"
          >渠道</a
        >
        <Divider
          type="vertical"
          v-hasCC="[
            {
              name: '-v1-net-setting-bind-channel',
              flag: '/v1/net/setting/bind-channel',
            },
            {
              name: '-v1-net-setting-add-edit2',
              flag: '/v1/net/setting/add-edit',
            },
          ]"
        ></Divider>
        <a
          @click="handleEdit(row)"
          v-hasC="{
            name: '-v1-net-setting-add-edit2',
            flag: '/v1/net/setting/add-edit',
          }"
          >编辑</a
        >
        <Divider type="vertical" />
        <a @click="handlePersonnel(row)">人员</a>
        <Divider type="vertical" v-show="row.status=='0'" v-hasC="{
            name: 'v1-net-setting-delete-net-config',
            flag: 'v1/net/setting/delete-net-config',
          }"/>
        <a @click="handleDel(row)" 
        style="color:red;" 
        v-show="row.status=='0'"
        v-hasC="{
            name: 'v1-net-setting-delete-net-config',
            flag: 'v1/net/setting/delete-net-config',
          }">删除</a>
      </template>
      <template slot-scope="{ row }" slot="project">
        <template v-for="(item, index) in row.project_str">
          <Tag type="border" :key="index" v-if="item">{{ item }}</Tag>
        </template>
      </template>
      <template slot-scope="{ row }" slot="channel">
        {{ row.count_channel }}个渠道
      </template>
      <template slot-scope="{ row }" slot="status">
        <Tag color="default">{{ row.status_str }}</Tag>
      </template>
    </Table>
    <Project ref="Project" @askData="askData"></Project>
    <Channel ref="Channel" @askData="askData"></Channel>
    <Edit ref="Edit" @askData="askData"></Edit>
    <Personnel ref="Personnel" @askData="askData"></Personnel>
  </Card>
</template>
<script>
import Project from "./Project";
import Channel from "./Channel";
import Edit from "./Edit";
import Personnel from "./Personnel";
import { netsettingindex, netsettingcondition ,netsettingDel} from "@/api/hqapi";
export default {
  name: "toConfigure",
  components: { Project, Channel, Edit, Personnel },
  data() {
    return {
      projectLists: [],
      params: {
        project_id: "",
      },
      columns: [
        {
          title: "权限组",
          key: "name",
          minWidth: 120,
          ellipsis: true,
          tooltip: true,
        },
        { title: "项目", slot: "project", minWidth: 120 },
        // { title: '配置渠道', slot: 'channel', width: 120 },
        { title: "状态", slot: "status", width: 90 },
        { title: "人员", key: "count_member", width: 80 },
        { title: "操作", slot: "action", width: 250 },
      ],
      data: [],
      loading: false,
    };
  },
  mounted() {
    this.initial();
  },
  methods: {
    initial() {
      this.askData();
      netsettingcondition().then((res) => {
        this.projectLists = res.project;
      });
    },
    askData() {
      this.loading = true;
      netsettingindex(this.params).then((res) => {
        this.data = res;
        this.loading = false;
      });
    },
    handleProject(row) {
      this.$refs.Project.initial(row);
    },
    handleChannel(row) {
      this.$refs.Channel.initial(row);
    },
    handleEdit(row) {
      this.$refs.Edit.initial(row);
    },
    handlePersonnel(row) {
      this.$refs.Personnel.initial(row);
    },
    handleDel(row){
      this.$Modal.confirm(
          {
              title:'删除提示',
              content:'是否确认删除此条记录，删除后不可恢复',
              onOk:()=> {
                  netsettingDel({id:row.id}).then(()=>{
                      this.$Message.success('删除成功')
                      this.askData();
                  }).catch(()=>{

                  })
                  
              }
          }
      )
    }
  },
};
</script>
